<template>
	<view class="background">
		<view class="head-box">
			<view class="head-hidden-box common">
				<view class="head-left-box" @tap="back">
					<!-- <image src="../../../static/jingjie/return_h.png"></image> -->
					<view class="return-title">取消</view>
				</view>
				<view class="head-center-box">我来回应</view>
				<view class="head-right-box" @tap="rightClick()"></view>
			</view>
		</view>
		<view class="border-box">
			<view class="item title-head">
				<view class="title">
					<text>标题：</text>
					<input v-model="title" type="text" placeholder="标题不超过25个字" maxlength="25">
				</view>
			</view>
			<view v-for="(item,index) in imgTxtItmes" :key="index">
				<!-- <view class="item">
					<textarea v-model="item.text" class="content" auto-height="true" placeholder="输入内容"></textarea>
				</view> -->
				<view class="item" v-for="(item1,index1) in item.textList" :key="index">
					<textarea v-model="item1.text" class="content" auto-height="true" placeholder="输入内容"></textarea>
				</view>
				<view class="addTextArea" @tap="addTextArea(index)">
					<image src="../../../static/jingjie/add.png"></image>
					<text>添加文本段落</text>
				</view>
				<view class="img-big-box">
					<view @tap="gettoken('video',index)" class="addPic">
						<view v-if="videoLists==''" class="main">
							<image class="addImg" src="../../../static/jingjie/addvideo.png"></image>
							<view class="addTxt">添加视频</view>
							<view class="addTxt1">大小不要超过50M</view>
						</view>
						<video v-else mode="center" poster="../../../static/jingjie/addvideo.png" class="showImg" :src="videoLists"></video>
					</view>
				</view>
			</view>
		</view>
		<view class="feeSurround">
			<view class="chargeBox common">
				<view class="charge-title">收费围观<text class="tips">（开启后收取每位围观者1个猫币）</text></view>
				<switch class="changbtn" @change="switch1Change" />
			</view>
			<view class="hidden-tips" v-if="isDisplay">所获猫币将依次分配给观点发布者、平台和话题发布者</view>
		</view>
		<input class="preview_title textOverflow" v-model="title" />
		<view class="fengmian-box">
			<view class="fm-hidden-box">
				<view class="kind1 common" @tap="gettoken('img')">
					<image :src="coverMap1" mode="aspectFill"></image>
					<canvas style="width: 0px; height: 200px;" canvas-id="firstCanvas"></canvas>
					<view class="tips-title lingHeight" :class="{style:coverMap1}">点击编辑封面</view>
				</view>
			</view>
		</view>
		<view class="btn" @tap="rightClick">
			发布
		</view>
	</view>
</template>

<script>
	import qiniu from "../../../common/qiniuUploader.js"

	export default {
		components: {

		},
		data() {
			return {
				menuIndex: 0,
				imageList: [],
				formatIndex: 0,
				isShowPublish: false,
				// labelName: '',
				coverMap1: '',
				// coverPics: [],
				classList: [],
				disPlay: true,
				imgNum: [],
				classIndex: 1,
				videoLists: [], //视频数组
				isDisplay: false,
				is_reward: false,
				sourceType: [
					['camera'],
					['album'],
					['camera', 'album']
				],
				sizeType: [
					['compressed'],
					['original'],
					['compressed', 'original']
				],

				backImgArr: [],
				index: 0, //上传图片索引
				title: '',
				imgTxtItmes: [{
					text: '',
					img: '',
					textList: []
				}], //每组
				id: '',
				classfiy: '',
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.classfiy = option.classfiy;
			console.log(this.id)
		},
		onShow: function() {

		},
		mounted() {},
		methods: {
			selectMenu(index) {
				this.menuIndex = index;
				// this.$emit('switchTab', index)
			},
			closeImg(index) { //取消已选择视频
				this.videoList = ""
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			switch1Change: function(e) {
				this.isDisplay = e.target.value;
				if (this.isDisplay == false) {
					this.is_reward = false
				} else {
					this.is_reward = true
				}
				console.log(this.is_reward)
			},

			rightClick() { //发布视频
				if (this.videoLists.length == 0) {
					uni.showToast({
						title: '请添加视频',
						icon: 'none',
					})
					return
				} else if (this.coverMap1 == "") {
					uni.showToast({
						title: '请添加封面',
						icon: 'none',
					})
					return
				} else {
					this.releaseVideo();
				}

			},

			selectClass(index, labelName) {
				this.classIndex = index;
				this.labelName = labelName; //选择的类别
			},
			addTextArea(index) { //点击添加文本段落
				for (var i = 0; i < this.imgTxtItmes.length; i++) {
					let obj = {
						text: '',
					}
					this.imgTxtItmes[index].textList.push(obj)
					break
				}
			},
			// #ifdef APP-PLUS
			gettoken(type, index) {
				if (type == 'img') {
					this.appselectImgFrount()
				} else if (type == 'video') {
					this.chooseVideo()
				}
			},
			// #endif
			// #ifdef MP-WEIXIN
			gettoken(type, index) {
				var me = this;
				var data = {
					key: null,
				}
				this.myAjaxNewPost({
					model: 'push',
					controllerName: 'upload',
					actionName: 'getToken',
					data: data,
					successBack: function(res) {

						me.token = res.data.data
						console.log(me.token)
						if (me.token != '') {
							if (type == 'img') {
								me.selectImgFrount()
							} else if (type == 'video') {
								me.chooseVideo()
							}
						}
					}
				})
			},
			// #endif
			chooseVideo() { //选择视频或拍摄
				uni.showActionSheet({
					itemList: ['相册', '拍摄'],
					success: (e) => {
						console.log(e)
						if (e.tapIndex == 0) { //从相册选择
							var me = this;
							uni.chooseVideo({ //拍摄
								count: 1,
								sourceType: ['album'],
								compressed: true, //是否压缩视频资源
								success: function(res) {
									console.log(res)
									// return
									if (res.size > 52428800) { //控制上传视频大小
										uni.showToast({
											title: "请选择小于50M的视频!",
											icon: 'none'
										})
										return
									} else {
										// me.videoLists = res.tempFilePath;
										var filePath = res.tempFilePath;
										console.log(filePath);
										// 交给七牛上传
										if (me.token != '') {
											uni.showLoading({
												title: '上传中，请稍候'
											})
											qiniu.upload(filePath, (res) => {
												console.log(res.imageURL)
												me.videoLists = res.imageURL
												me.coverMap1 = res.imageURL + '?vframe/jpg/offset/0'

												uni.hideLoading()
												console.log('file url is: ' + res.fileUrl);
											}, (error) => {
												console.log('error: ' + error);
											}, {
												region: 'ECN',
												domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
												key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
												// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
												uptoken: me.token, // 由其他程序生成七牛 uptoken
												// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
												uptokenFunc: function() {
													return '[yourTokenString]';
												}
											}, (res) => {
												console.log('上传进度', res.progress)
												console.log('已经上传的数据长度', res.totalBytesSent)
												console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
											}, (err) => {
												// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
											});
										}
									}
									// console.log(me.videoLists)
								}
							});
						} else {
							var me = this;
							uni.chooseVideo({ //拍摄
								count: 1,
								maxDuration: 60, //拍摄时长限制
								sourceType: ['camera'],
								compressed: true, //是否压缩视频资源
								success: function(res) {
									console.log(res)
									// return
									var filePath = res.tempFilePath;
									console.log(filePath);
									// 交给七牛上传
									if (me.token != '') {
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											me.videoLists = res.imageURL
											me.coverMap1 = res.imageURL + '?vframe/jpg/offset/0'
											console.log(me.coverMap1,'封面')
												console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											console.log('error: ' + error);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											uptokenFunc: function() {
												return '[yourTokenString]';
											}
										}, (res) => {
											console.log('上传进度', res.progress)
											console.log('已经上传的数据长度', res.totalBytesSent)
											console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
										}, (err) => {
											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
										});
									}
								}
							});
						}
					}
				})
			},
			// 			uploadVideo() { //上传视频
			// 				var me = this;
			// 				const ctx = uni.createCanvasContext('firstCanvas') //创建画布
			// 				uni.uploadFile({
			// 					url: 'https://www.huihejituan.com/guidetravel/uploadFile/uploadAudio.do',
			// 					filePath: me.videoLists,
			// 					name: 'file',
			// 					formData: {
			// 						'user_id': uni.getStorageSync('user_id'),
			// 						'type': 7
			// 					},
			// 					success: function(res) {
			// 						console.log(res)
			// 						// re.data=res.data.
			// 						me.videoLists = JSON.parse(res.data)
			// 						console.log(me.videoLists)
			// 						me.coverMap1 = ctx.drawImage(me.videoLists, 0, 0, 150, 100)
			// 						ctx.draw()
			// 					},
			// 					fail: function(e) {
			// 						uni.showToast({
			// 							title: '视频上传失败，请重试',
			// 							icon: 'none'
			// 						})
			// 						return;
			// 					}
			// 				});
			// 			},
			releaseVideo() { //发布视频
				var date = new Date().getTime();
				//正文
				var imgTxt = [];
				for (let j = 0; j < this.imgTxtItmes[0].textList.length; j++) {
					//console.log(this.imgTxtItmes[0].textList[j].text)
					imgTxt.push(this.imgTxtItmes[0].textList[j].text)
				}
				if (this.videoLists != '') {
					imgTxt.push(this.videoLists);
				}
				console.log(imgTxt);
				var coverPics=[]
				coverPics.push(this.coverMap1)
				// imgTxt=imgTxt.join(',')
				var data = {
					oper_id: uni.getStorageSync('user_id'),
					user_id: uni.getStorageSync('user_id'),
					title: this.title,
					curiosity_id: this.id, //好奇id
					is_reward: this.is_reward,
					picStrings: imgTxt, //视频与文字
					coverPics: coverPics, //封面图片
					style: 0,
					classfiy: this.classfiy,
				}
				console.log(data);
				this.myAjaxNewPost({
					model: 'news',
					controllerName: "curiosityViewpoint",
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res)
						uni.showToast({
							title: "发布成功",
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						})
					}
				})

			},
			appselectImgFrount(type) {
				var me = this;
				uni.chooseImage({
					count: 1,
					sizeType: 'original',
					sourceType: ['album'],
					success: function(res) {
						console.log(res);
						var filePath = res.tempFiles[0].path;
						uni.uploadFile({
							url: 'http://www.curiousmore.com:8768/eg-api/push/upload/uploadPicture',
							// url: 'http://192.168.101.14:8768/eg-api/push/upload/uploadPicture',
							filePath: filePath,
							name: 'file',
							formData: {
								'user_id': uni.getStorageSync('user_id'),
								'type': 'pic'
							},
							success: function(uploadFileRes) {
								// me.backImgArr.push(JSON.parse(uploadFileRes.data)[0]);
								console.log(JSON.parse(uploadFileRes.data)[0]);
								var imageURL = JSON.parse(uploadFileRes.data)[0];
								me.coverMap1 = imageURL

							},
							fail: function(e) {
								uni.showToast({
									title: '图片上传失败，请重试',
									icon: 'none'
								})
								return;
							}
						});
					}
				})
			},
			selectImgFrount(type) { //选择图片
				var me = this;
				uni.chooseImage({
					count: 1,
					sizeType: 'original',
					sourceType: ['album'],
					success: function(res) {
						console.log(res);
						var filePath = res.tempFiles[0].path;
						// 交给七牛上传

						if (me.token != '') {
							uni.showLoading({
								title: '上传中'
							})
							qiniu.upload(filePath, (res) => {
								console.log(res.imageURL)
								var imageURL = res.imageURL
								me.coverMap1 = imageURL
								me.coverPics.push(me.coverMap1)
								uni.hideLoading()
								console.log('file url is: ' + res.fileUrl);
							}, (error) => {
								console.log('error: ' + error);
							}, {
								region: 'ECN',
								domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
								key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
								// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
								uptoken: me.token, // 由其他程序生成七牛 uptoken
								// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
								uptokenFunc: function() {
									return '[yourTokenString]';
								}
							}, (res) => {
								console.log('上传进度', res.progress)
								console.log('已经上传的数据长度', res.totalBytesSent)
								console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)

							}, () => {
								// 取消上传
							}, () => {
								// `before` 上传前执行的操作
							}, (err) => {
								// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
							});
						}
					}
				})
			},
			CurentTime() { //当前时间
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var day = now.getDate();
				var clock = year + "-";
				if (month < 10)
					clock += "0";
				clock += month + "-";
				if (day < 10)
					clock += "0";
				clock += day + "";
				return (clock);
			},

		},
	}
</script>

<style scoped>
	/*头部开始*/
	.head-box {
		width: 100%;
		height: 128upx;
		background-color: white;
		padding: 0 24upx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.head-hidden-box {
		padding-top: 65upx;
		width: 100%;
	}

	.head-left-box {
		display: flex;
		align-items: center;
	}

	.head-left-box image {
		width: 21upx;
		height: 36upx;
	}

	.return-title {
		color: rgba(102, 102, 102, 1);
		font-size: 32upx;
		margin-left: 10upx;
	}

	.head-center-box {
		color: rgba(51, 51, 51, 1);
		font-size: 36upx;
	}

	.head-right-box {
		width: 80upx;
		color: rgba(70, 206, 207, 1);
		font-size: 32upx;
	}

	/*头部结束*/
	.background {
		width: 100%;
		background-color: #FFFFFF;
	}

	.item {
		padding: 34upx 24upx;
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
	}

	.item textarea {
		padding: 20upx 0upx 30upx 20upx;
		width: 688upx;
	}

	.title-head {
		border-top: 1upx solid rgba(230, 230, 230, 1);
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
		margin-top: 128upx;
		padding: 20upx;
		color: #333333;
		font-size: 38upx;
		display: flex;
		align-items: center;
	}

	.title-head input {
		font-size: 28upx;
		padding-top: 10upx;
	}

	.addTextArea {
		padding: 34upx 24upx;
		/* border-bottom: 1upx solid rgba(230,230,230,1); */
		display: flex;
		align-items: center;
	}

	.addTextArea image {
		width: 35upx;
		height: 35upx;
	}

	.addTextArea text {
		font-size: 36upx;
		color: #33cbcb;
		margin-left: 10upx;
	}

	.item-title {
		font-size: 36upx;
	}

	.item-main {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item-styles {
		margin-right: 50upx;
		display: flex;
		align-items: center;
	}

	.item-styles .select {
		width: 26upx;
		height: 26upx;
		margin-right: 10upx;
	}

	.item-styles .style {
		width: 70upx;
		height: 41upx;
	}

	.title {
		display: flex;
		align-items: center;
		margin-top: 10upx;
	}

	.title text {
		font-size: 38upx;
		color: rgba(51, 51, 51, 1);
		font-weight: bold;
	}

	.title input {
		width: 520upx;
		display: inline-block;
	}

	.content {
		width: 100%;
		height: 160upx;
		background: rgba(233, 247, 247, 1);
		font-size: 36upx;
		margin: auto;
	}

	.img-big-box {
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.addPic {
		width: 100%;
		height: 342upx;
		background: #E9F7F7;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.addPic .main {
		text-align: center;
	}

	.addImg {
		width: 81upx;
		height: 79upx;
	}

	.addTxt {
		font-size: 36upx;
		color: #33CBCC;
	}

	.addTxt1 {
		font-size: 20upx;
		color: #33CBCC;
	}

	.style1-main {
		display: flex;
		align-items: center;
		margin-top: 10upx;
	}

	.style1-main textarea {
		height: 222upx;
		line-height: 74upx;
	}

	.style1-img {
		width: 222upx;
		height: 222upx;
		background: #E9F7F7;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.style1-img .main {
		text-align: center;
	}

	.style2 {
		margin-top: 10upx;
	}

	.border-box {
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
		padding-bottom: 50upx;
	}

	.style2-img {
		background: #E9F7F7;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 342upx;
		margin-top: 10upx;
	}

	.style2-img .main {
		text-align: center;
	}

	.style3-main {
		display: flex;
		justify-content: space-between;
		margin-top: 10upx;
	}

	.style3-img {
		background: #E9F7F7;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 210upx;
		height: 210upx;
	}

	.style3-img .main {
		text-align: center;
	}

	.addPic .main {
		text-align: center;
	}

	.showImg {
		width: 100%;
		height: 100%;
	}

	.beijing {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		position: relative;
	}

	.feeSurround {
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		padding: 0 24upx;
		box-sizing: border-box;
		border-bottom: 1rpx solid rgba(230, 230, 230, 1);
		position: relative;
	}

	.charge-title {
		color: rgba(51, 51, 51, 1);
		font-size: 32upx;
	}

	.changbtn {
		position: absolute;
		right: 24upx;
		top: -5upx;
	}

	.tips {
		color: rgba(153, 153, 153, 1);
		font-size: 24upx;
	}

	.hidden-tips {
		color: rgba(51, 51, 51, 1);
		font-size: 24upx;
		margin-bottom: 20upx;
	}

	.preview_title {
		color: rgba(51, 51, 51, 1);
		font-size: 34upx;
		margin-top: 65upx;
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.fengmian-box {
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
		padding-bottom: 50upx;
	}

	.fm-hidden-box {
		width: 100%;
		background-color: white;
	}

	.kind1 {
		width: 100%;
		height: 350upx;
		background: rgba(233, 247, 247, 1);
		border-radius: 10upx;
		position: relative;
		z-index: 1;
	}

	.kind1 image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}

	.tips-title {
		width: 100%;
		text-align: center;
		line-height: 286upx;
		color: rgba(204, 204, 204, 1);
		font-size: 26upx;
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
	}

	.style {
		color: rgba(255, 255, 255, 1);
	}

	.lingHeight {
		line-height: 350upx;
	}
</style>
